<template>
    <div class="drawList-box">
        <my-header :title="title"></my-header>
        <div class="header">
            <img src="https://img5.jianke.com/mall/vmall/index/201812/64e58ff0c1a04fba80a87b9f969757fd.png?imageMogr2/format/jp2" alt="">
            <man-swiper></man-swiper>
        </div>
        <div class="content">
            <img src="https://img.jianke.com/mall/vmall/index/201810/b8c61f7fabd340439f14e243d1121310.png?imageMogr2/format/jp2" alt="">
            <ul>
                <van-tabs @click="onClick">
                    <van-tab v-for="(value, index) in content" :title="value" :key="index">
                        <div class="recommend-list">
                            <div class="rl-item" v-for="(value, index) in arr" :key="index">
                                <router-link :to="'/product/' + value.productCode">
                                    <div class="wrap">
                                        <img :src="value.productImageUrl" alt="">
                                        <div class="rl-text">
                                            <span class="name">{{ value.productName }}</span>
                                            <span class="info">{{ value.introduction }}</span>
                                            <p class="list-price">
                                                <span class="price-left">
                                                    <em>￥</em>
                                                    {{ parseInt(value.productPrice/100) + '.00' }}
                                                </span>
                                                <span class="price-right">立即购买</span>
                                            </p>
                                        </div>
                                    </div>
                                </router-link>
                            </div>
                        </div>
                    </van-tab>
                </van-tabs>
            </ul>
        </div>
    </div>
</template>

<script>
import myHeader from 'Components/common/myHeader'
import manSwiper from './man-swiper'
import {mapActions, mapGetters} from 'vuex'

export default {
    data() {
        return {
            title: '女性',
            content: ['益气补血','妇科炎症','月经不调','更年期','减肥瘦身','乳腺疾病','女性不孕','避孕药'],
            moblie5List: [],
            moblie5List1: [],
            moblie5List2: [],
            moblie5List3: [],
            moblie5List4: [],
            arr: [],
        }
    },
    components: {
        myHeader,manSwiper
    },
    methods: {
        onClick(index, title) {
            switch(title) {
                case '益气补血':
                    return this.arr = this.moblie5List;
                case '妇科炎症':
                    return this.arr = this.moblie5List1;
                case '月经不调':
                    return this.arr = this.moblie5List2;
                case '更年期':
                    return this.arr = this.moblie5List3;
                case '减肥瘦身':
                    return this.arr = this.moblie5List4;
                case '乳腺疾病':
                    return this.arr = this.moblie5List5;
                case '女性不孕':
                    return this.arr = this.moblie5List6;
                case '避孕药':
                    return this.arr = this.moblie5List7;
            }

        },
        handleScroll () {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            let offsetTop1 = document.querySelector('.van-tabs__wrap') && document.querySelector('.van-tabs__wrap').offsetTop;
            document.querySelector('.van-tabs__wrap') && scrollTop > offsetTop1 ? document.querySelector('.van-tabs__wrap').style.position="fixed" : document.querySelector('.van-tabs__wrap').style.position="absolute"
        },
        ...mapActions(['getMobile5'])
    },
    computed: {
        ...mapGetters(['getMobile5s'])
    },
    async mounted () {
        await this.getMobile5('154505,10984,51549,6902,222119,11605,51574,1822,173495,10636,1614,74951');
        this.moblie5List = this.getMobile5s && this.getMobile5s || [];
        this.arr = this.moblie5List

        await this.getMobile5('25998,1566,796245,772422,391,12163,512410,154398,227126,646,3180,11886');
        this.moblie5List1 = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('755414,784307,10629,11627,8021,5982,4428,10923,1102,9683');
        this.moblie5List2 = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('7142,27163,26931,3661,11912,26843,11624,221841,172315,182265');
        this.moblie5List3 = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('404829,11101,223992,331417,14213,762598,254236,523828');
        this.moblie5List4 = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('3433,11259,500423,207813,77356,6615,20352,27555,20301,77');
        this.moblie5List5 = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('12256,8381,27346,2516,27343,216728,2445,26677');
        this.moblie5List6 = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('784307,2549,4927,2573');
        this.moblie5List7 = this.getMobile5s && this.getMobile5s || [];

        // 改变背景颜色
        // document.querySelector('.van-nav-bar__title').style.color = '#ffffffcc';
        // document.querySelector('.van-icon').style.color = '#ffffffcc';
        // document.querySelectorAll('.van-icon')[1].style.color = '#ffffffcc';
        // document.querySelector('.van-hairline--bottom').style.background = 'rgb(7, 82, 114)';
        // document.querySelector('.van-hairline--bottom').style.opacity = '0.9'

        // 获取滚动距离
        window.addEventListener('scroll', this.handleScroll)
        
    }
}
</script>

<style lang="scss" scoped>
    @import 'Css/common-clounm.scss';

    a {
        color: #333;
    }

    .van-nav-bar {
        z-index: 9999 !important;
    }
    .van-tabs--line .van-tabs__wrap {
        height: .46rem !important;
    }

    .recommend-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        background-color: #f5f5f5;
        padding: 0rem 0.05rem;
        .wrap {
            background: #fff !important;
        }
    }

    img {
        width: 100%;
        vertical-align: middle;
    }
</style>

